<template>
	<div class="ngyx-cont">
		<div class="ngyx-cont-list">
			<van-list v-show="storeList.length"
                v-model="loading"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                @load="onLoad">
				<div class="ngyx-list-item" v-for="(item, index) in storeList" :key="index">
					<div class="ngyx-list-item-img">
						<img :src="item.imgdir || defaultImg" />
					</div>
					<div class="ngyx-list-item-msg">
						<div class="ngyx-list-item-name">
							<span>{{item.shop_name}}</span>
						</div>
						<div class="ngyx-list-item-tip">
							<span>{{item.subtitle}}</span>
						</div>
					</div>
					<van-button round class="ngyx-list-item-jr" @click="navToDetail(item.store_id)">
						<span>进入</span>
						<i class="icon"></i>
					</van-button>
				</div>
			</van-list>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { getUmpNGStoreList } from '@/api/internal/internal'
	export default Vue.extend({
	  data() {
	    return {
	      p: 1,
	      error: false,
	      loading: false,
	      finished: false,
     		defaultImg:'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
	      storeList: []
	    }
	  },
	  methods: {
	    // 跳转链接名
	    JumpName(name, data) {
	      this.$JumpName(this, name, data)
	    },
	    init() {
	      this.p = 1
	      this.finished = false
	      this.storeList = []
	      this.$loadingWrap.show()
	      setTimeout(() => {
	        this.$loadingWrap.close()
	      }, 50000)
	      this.onLoad()
	    },
	    onLoad() {
	      const params = {
	        p: this.p
	      }
	      getUmpNGStoreList(params).then(res => {
	        this.$loadingWrap.close()
	        this.loading = false
	        if (res.data.length > 0) {
	          this.storeList.push(...res.data)
	          this.p++
	        } else {
	          this.finished = true
	        }
	      }).catch(() => {
	        this.error = true
	      })
	    },
	    // 点击进入
	    navToDetail(storeId) {
	      this.JumpName('internalDetail', { storeId: storeId })
	    }
	  },
	  created() {
	    this.init()
		},
		mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    }
	})
</script>

<style lang="scss">
	.ngyx-cont {
		.ngyx-cont-list {
			padding: 20px 26px;
		}
		.ngyx-list-item {
			display:flex;
			align-items: center;
			background-color: #fff;
			border-radius: 20px;
			padding: 24px;
			margin-bottom: 20px;
			.ngyx-list-item-img {
				width: 114px;
				height: 114px;
				border-radius: 20px;
				overflow: hidden;
				margin-right: 20px;
				img{
					width:100%;
				}
			}
			.ngyx-list-item-msg{
				flex:1;
				.ngyx-list-item-name{
					font-size:30px;
					font-weight: bold;
					line-height: 1.5;
				}
				.ngyx-list-item-tip{
					font-size:22px;
					line-height: 40px;
					color:#999;
				}
			}
			.ngyx-list-item-jr{
				height:48px;
				padding:0 20px 0 26px;
				border-color:#F30C23;
				font-size:24px;
				color:#F30C23;
				.icon{
					display:inline-block;
					width:12px;
					height:19px;
					background:url("https://img.wifenxiao.com/h5-wfx/images/arrow-red.png") no-repeat;
					background-size:100% 100%;
				}
			}
		}
	}
</style>
